<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>datalist示例</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f7fa;
            color: #333;
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .container {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .example {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
        }
        
        h2 {
            color: #3498db;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        input[type="text"], input[type="email"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        
        input[type="text"]:focus, input[type="email"]:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
        }
        
        .code {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            margin-top: 15px;
            font-family: 'Consolas', monospace;
            border-left: 4px solid #3498db;
        }
        
        .explanation {
            background-color: #e8f4fc;
            padding: 15px;
            border-radius: 5px;
            margin-top: 15px;
            border-left: 4px solid #2ecc71;
        }
        
        .note {
            background-color: #fff3cd;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            border-left: 4px solid #ffc107;
        }
    </style>
</head>
<body>
    <h1>&lt;datalist&gt; 标签使用示例</h1>
    
    <div class="container">
        <div class="example">
            <h2>示例 1: 基本用法</h2>
            <label for="browser">选择您喜欢的浏览器:</label>
            <input type="text" id="browser" list="browsers" placeholder="输入或选择浏览器">
            <datalist id="browsers">
                <option value="Chrome">
                <option value="Firefox">
                <option value="Safari">
                <option value="Edge">
                <option value="Opera">
            </datalist>
            
            <div class="code">
                <strong>HTML代码:</strong><br>
                &lt;input type="text" id="browser" list="browsers" placeholder="输入或选择浏览器"&gt;<br>
                &lt;datalist id="browsers"&gt;<br>
                &nbsp;&nbsp;&lt;option value="Chrome"&gt;<br>
                &nbsp;&nbsp;&lt;option value="Firefox"&gt;<br>
                &nbsp;&nbsp;&lt;option value="Safari"&gt;<br>
                &nbsp;&nbsp;&lt;option value="Edge"&gt;<br>
                &nbsp;&nbsp;&lt;option value="Opera"&gt;<br>
                &lt;/datalist&gt;
            </div>
            
            <div class="explanation">
                <strong>说明:</strong> 此示例展示了datalist的基本用法。输入字段通过list属性与datalist关联，用户可以看到预定义的浏览器选项，也可以输入自定义值。
            </div>
        </div>
        
        <div class="example">
            <h2>示例 2: 电子邮件自动完成</h2>
            <label for="email">输入您的邮箱地址:</label>
            <input type="email" id="email" list="email-providers" placeholder="例如: user@example.com">
            <datalist id="email-providers">
                <option value="@gmail.com">
                <option value="@yahoo.com">
                <option value="@outlook.com">
                <option value="@hotmail.com">
                <option value="@icloud.com">
            </datalist>
            
            <div class="code">
                <strong>HTML代码:</strong><br>
                &lt;input type="email" id="email" list="email-providers" placeholder="例如: user@example.com"&gt;<br>
                &lt;datalist id="email-providers"&gt;<br>
                &nbsp;&nbsp;&lt;option value="@gmail.com"&gt;<br>
                &nbsp;&nbsp;&lt;option value="@yahoo.com"&gt;<br>
                &nbsp;&nbsp;&lt;option value="@outlook.com"&gt;<br>
                &nbsp;&nbsp;&lt;option value="@hotmail.com"&gt;<br>
                &nbsp;&nbsp;&lt;option value="@icloud.com"&gt;<br>
                &lt;/datalist&gt;
            </div>
            
            <div class="explanation">
                <strong>说明:</strong> 此示例展示了如何将datalist用于电子邮件输入。当用户输入电子邮件时，系统会显示常见的电子邮件提供商后缀。
            </div>
        </div>
        
        <div class="example">
            <h2>示例 3: 带标签的选项</h2>
            <label for="city">选择您所在的城市:</label>
            <input type="text" id="city" list="cities" placeholder="输入或选择城市">
            <datalist id="cities">
                <option value="北京" label="中国首都">
                <option value="上海" label="经济中心">
                <option value="广州" label="广东省会">
                <option value="深圳" label="科技中心">
                <option value="杭州" label="浙江省会">
            </datalist>
            
            <div class="code">
                <strong>HTML代码:</strong><br>
                &lt;input type="text" id="city" list="cities" placeholder="输入或选择城市"&gt;<br>
                &lt;datalist id="cities"&gt;<br>
                &nbsp;&nbsp;&lt;option value="北京" label="中国首都"&gt;<br>
                &nbsp;&nbsp;&lt;option value="上海" label="经济中心"&gt;<br>
                &nbsp;&nbsp;&lt;option value="广州" label="广东省会"&gt;<br>
                &nbsp;&nbsp;&lt;option value="深圳" label="科技中心"&gt;<br>
                &nbsp;&nbsp;&lt;option value="杭州" label="浙江省会"&gt;<br>
                &lt;/datalist&gt;
            </div>
            
            <div class="explanation">
                <strong>说明:</strong> 此示例展示了如何使用label属性为选项提供附加描述。在某些浏览器中，这些标签可能会显示为提示信息。
            </div>
        </div>
        
        <div class="note">
            <strong>注意:</strong> 
            <ul>
                <li>datalist与select不同，它允许用户输入自定义值，而不仅仅是选择预定义选项</li>
                <li>datalist的id必须与输入字段的list属性值匹配</li>
                <li>不同浏览器对datalist的支持和显示方式可能略有不同</li>
                <li>datalist在移动设备上特别有用，因为它可以触发设备自带的自动完成功能</li>
            </ul>
        </div>
    </div>
</body>
</html>